"use client"

import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

interface TimeSelectorProps {
  timeFrames: string[]
  selectedIndex: number
  onSelect: (index: number) => void
}

export default function TimeSelector({ timeFrames, selectedIndex, onSelect }: TimeSelectorProps) {
  return (
    <div className="flex flex-col space-y-8 items-center">
      {timeFrames.map((time, index) => (
        <motion.button
          key={time}
          onClick={() => onSelect(index)}
          className={cn(
            "relative w-32 h-14 rounded-md flex items-center justify-center",
            "bg-gray-900 text-gray-400 border border-gray-800",
            "transition-colors duration-300 hover:bg-gray-800",
            selectedIndex === index && "text-white",
          )}
          whileTap={{ scale: 0.98 }}
        >
          <span className="z-10 font-medium tracking-wide">{time}</span>

          {/* Liquid metal effect for selected item */}
          {selectedIndex === index && (
            <motion.div
              layoutId="selectedTime"
              className="absolute inset-0 bg-gradient-to-br from-gray-700 to-gray-900 rounded-md overflow-hidden"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ type: "spring", stiffness: 300, damping: 30 }}
            >
              <div className="absolute inset-0 opacity-20">
                <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-gray-300 via-gray-700 to-transparent animate-pulse" />
              </div>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-500 to-transparent opacity-10 animate-shimmer" />
            </motion.div>
          )}
        </motion.button>
      ))}

      {/* Brand symbol at bottom */}
      <div className="absolute bottom-8 w-12 h-12">
        <div className="w-full h-full rounded-full bg-gray-900 flex items-center justify-center">
          <svg viewBox="0 0 24 24" className="w-6 h-6 text-gray-700" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
            <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" />
          </svg>
        </div>
      </div>
    </div>
  )
}

